import React, { useEffect, useState } from 'react'
import { Input, Form } from 'antd'
const { Password: InputPassword, TextArea: InputTextArea, Search: InputSearch } = Input
import EventHub from '../EventHub/index.jsx'
const { Item: FormItem } = Form

export function EInput({ params }) {
  const { formType, label, index, children, onChange, value, ...other } = params || {}
  const [EInputValue, setEInputValue] = useState(value)
  const FormItemParams = {
    label: label === null ? '' : (label ? label : ' '),
    colon: !!label
  }


  useEffect(() => {
    setEInputValue(value)
    console.log(params, index, "---------- EInput -----------");
  }, [params.value])



  let InputType;
  switch (formType) {
    case "Input_Password":
      InputType = InputPassword
      break;
    case "Input_TextArea":
      InputType = InputTextArea
      break;
    case "Input_Search":
      InputType = InputSearch
      break;
    default:
      InputType = Input;
  }

  return <FormItem {...FormItemParams} >
    <InputType
      value={EInputValue}
      onChange={(e) => {
        var eTargetValue = e.target.value
        setEInputValue(eTargetValue)
        params.value = eTargetValue
        if (onChange) { onChange(eTargetValue, e) }
      }} {...other}>

    </InputType>
  </FormItem>
}